<template>
    <div id="add-edit-model">
        <el-dialog
            :title="titleCon"
            v-model="dispDialog" 
            draggable 
            :close-on-click-modal="false" 
            :fullscreen="true" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-row class="el-row-s" :gutter="30">
                <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                    <div class="time-s">
                        <el-timeline>
                            <el-timeline-item
                                v-for="item in timeList"
                                :key="item.id"
                                :color="activityColor === item.id ? '#409EFF' : ''"
                                placement="top"
                                :hollow="true"
                                @click="timelineHandle(item)"
                                :timestamp="item.d_OperationTime"
                            >
                                <el-card style="background: #E5EAF3;cursor: pointer;">
                                    <div class="set-con">
                                        <h4 v-if="statusVal === 'dispose'" style="color: #409EFF;">{{ item.v_TaskOperationClassName }}</h4>
                                        <h4 v-else style="color: #409EFF;">{{ item.v_OperationClassName }}</h4>
                                        <template v-if="statusVal === 'dispose'">
                                            <div v-if="item.setShow">
                                                <el-button size="small" v-if="item.type === 'success'" style="margin-top: 10px" :type="item.type"> 受控 </el-button>
                                                <el-button size="small" v-if="item.type === 'danger'" style="margin-top: 10px" :type="item.type"> 失控 </el-button>
                                            </div>
                                            <div style="color: #E6A23C;margin-top: 5px;font-size: 12px;color: #58585B;white-space: pre-line;">{{ item.v_OperatorDescribe }}</div>
                                        </template>
                                        <template v-else>
                                            <div v-if="Object.keys(item.d_OperatorDictionaryDescribe).length !== 0">
                                                <template v-if="item.n_OperationClass !== 0">
                                                    <template v-if="item.n_OperationClass === 1">
                                                        <div style="color: #58585B; font-size: 12px;">
                                                            <div style="margin-top: 2px;">{{ item.d_OperatorDictionaryDescribe.v_RectifyDeptNameOld }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_RectifyUserNameOld }}</span></div>
                                                            <div style="margin-top: 2px;">转办给：{{ item.d_OperatorDictionaryDescribe.v_RectifyDeptName }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_RectifyUserName }}</span></div>
                                                        </div>
                                                    </template>
                                                    <template v-if="item.n_OperationClass === 3">
                                                        <div style="color: #58585B; font-size: 12px;">
                                                            <div style="margin-top: 2px;">{{ item.d_OperatorDictionaryDescribe.v_ReviewDeptNameOld }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_ReviewUserNameOld }}</span></div>
                                                            <div style="margin-top: 2px;">转办给：{{ item.d_OperatorDictionaryDescribe.v_ReviewDeptName }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_ReviewUserName }}</span></div>
                                                        </div>
                                                    </template>
                                                    <template v-if="item.n_OperationClass === 5"></template>
                                                    <template v-if="item.n_OperationClass === 2">
                                                        <el-button style="margin-top: 10px" size="small" type="warning"> 
                                                            <span v-if="item.d_OperatorDictionaryDescribe.v_RectificationStateName">{{ item.d_OperatorDictionaryDescribe.v_RectificationStateName }}</span>
                                                            <span v-else>-</span>
                                                        </el-button>
                                                        <div style="color: #58585B; font-size: 12px;">
                                                            <div style="margin-top: 2px;">{{ item.d_OperatorDictionaryDescribe.v_RectifyDeptName }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_RectifyUserName }}</span></div>
                                                            <div style="margin-top: 2px;">提交给：{{ item.d_OperatorDictionaryDescribe.v_ReviewDeptName }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_ReviewUserName }}</span></div>
                                                        </div>
                                                    </template>
                                                    
                                                    <template v-if="item.n_OperationClass === 4">
                                                        <el-button style="margin-top: 10px" size="small" type="warning">
                                                            <span v-if="item.d_OperatorDictionaryDescribe.n_ReviewResult">{{ item.d_OperatorDictionaryDescribe.n_ReviewResult }}</span>
                                                            <span v-else>-</span>
                                                        </el-button>
                                                        <div style="color: #58585B; font-size: 12px;">
                                                            <div style="margin-top: 2px;">{{ item.d_OperatorDictionaryDescribe.v_AcceptanceDeptName }}：{{ item.d_OperatorDictionaryDescribe.v_AcceptanceUserName }}</div>
                                                            <div style="margin-top: 2px;">提交给：{{ item.d_OperatorDictionaryDescribe.v_ReviewDeptName }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_ReviewUserName }}</span></div>
                                                        </div>
                                                    </template>
                                                    
                                                    <template v-if="item.n_OperationClass === 6">
                                                        <el-button style="margin-top: 10px" size="small" type="warning">
                                                            <span v-if="item.d_OperatorDictionaryDescribe.n_AcceptanceStateName">{{ item.d_OperatorDictionaryDescribe.n_AcceptanceStateName }}</span>
                                                            <span v-else>-</span>
                                                        </el-button>
                                                        <div style="color: #58585B; font-size: 12px;">
                                                            <div style="margin-top: 2px;">验收部门：{{ item.d_OperatorDictionaryDescribe.v_AcceptanceDeptName }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_AcceptanceUserName }}</span></div>
                                                        </div>
                                                    </template>
                                                </template>

                                                <template v-if="item.n_OperationClass === 0">
                                                    <div style="color: #58585B; font-size: 12px;">
                                                        <div style="margin-top: 2px;">排查{{ item.d_OperatorDictionaryDescribe.v_HiddenLevelName }}：{{ item.d_OperatorDictionaryDescribe.v_Describe }}</div>
                                                        <div style="margin-top: 2px;">{{ item.d_OperatorDictionaryDescribe.isSceneRectify }}</div>
                                                        <div style="margin-top: 2px;">提交给：{{ item.d_OperatorDictionaryDescribe.v_RectifyDeptName }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.d_OperatorDictionaryDescribe.v_RectifyUserName }}</span></div>
                                                        <div style="margin-top: 2px;">整改期限：{{ item.d_OperatorDictionaryDescribe.d_LimitTime }}</div>
                                                    </div>
                                                </template>
                                            </div>
                                            <div v-else>
                                                <template v-if="item.n_OperationClass === 4">
                                                    <el-button style="margin-top: 10px" size="small" type="warning">
                                                        <span v-if="item.v_OperatorDescribe">{{ item.v_OperatorDescribe }}</span>
                                                        <span v-else>-</span>
                                                    </el-button>
                                                    <div style="color: #58585B; font-size: 12px;">
                                                        <div style="margin-top: 2px;">操作部门：{{ item.v_OperatorDeptName }}<span style="background: #A3A6AD;margin-left: 5px;padding: 2px 5px;border-radius: 2px;">{{ item.v_OperatorUserName }}</span></div>
                                                    </div>
                                                </template>
                                            </div>
                                        </template>
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20-load">
                    <template v-if="statusVal === 'dispose'">
                        <div v-if="isShowType === 'form'" class="time-s">
                            <template v-for="(item,index) in basicsInfo" :key="index">
                                <el-divider content-position="left">{{ item.formTitle }}</el-divider>
                                <el-form size="default" label-width="160px">
                                    <el-row>
                                        <el-col style="padding-left: 10px !important; margin-bottom: 10px !important;" v-for="(data,index) in Object.keys(item.info)" :key="index" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                            <el-form-item :label="data">
                                                <el-input disabled readonly v-model="item.info[data]" :placeholder="data" clearable />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </template>
                        </div>
                        
                        <template v-if="isShowType === 'table'">
                            <el-table :data="listData" style="width: 100%" v-loading="tableLoading" border class="set-tab">
                                <template v-if="listData.length > 0" v-for="(t,key) in listData[0]" :key="key">
                                    <el-table-column v-if="typeof key === 'string' && key !== 'id'" min-width="160" :label="key" :prop="key" :show-overflow-tooltip="true" align="center" />
                                </template>
                            </el-table>
                            <el-pagination
                                v-model:currentPage="activePageNo"
                                v-model:page-size="activePageSize"
                                :total="activeTotalRows"
                                :page-sizes="[10, 20, 50, 100]"
                                small
                                background
                                @size-change="activeHandleSizeChange"
                                @current-change="activeHandleCurrentChange"
                                layout="total, sizes, prev, pager, next, jumper"
                            />
                        </template>
                    </template>

                    <template v-if="statusVal === 'waitOne' || statusVal === 'waitTwo'">
                        <div class="time-s">
                            <template v-for="(item,index) in basicsInfo" :key="index">
                                <template v-if="item.type === 'form'">
                                    <el-divider content-position="left">{{ item.formTitle }}</el-divider>
                                    <el-form size="default" label-width="160px">
                                        <el-row>
                                            <el-col style="padding-left: 10px !important; margin-bottom: 10px !important;" v-for="(data,index) in Object.keys(item.info)" :key="index" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                                <el-form-item :label="data">
                                                    <el-input disabled readonly v-model="item.info[data]" :placeholder="data" clearable />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                                </template>
                                <template v-if="item.type === 'table'">
                                    <el-divider content-position="left">{{ item.tableTitle }}</el-divider>
                                    <el-table :data="item.listData" style="width: 100%" border>
                                        <template v-for="(t,key) in item.listData[0]" :key="key">
                                            <el-table-column v-if="typeof key === 'string' && key !== 'id' && key !== 'fileObjectName'" min-width="160" :label="key" :prop="key" :show-overflow-tooltip="true" align="center" />
                                        </template>
                                        <el-table-column label="操作" align="center" fixed="right">
                                            <template #default="{row}">
                                                <el-button @click="viewClick(row)" class="icon-e" text type="warning">预览</el-button>
                                                <el-button @click="download(row)" class="icon-e" text type="primary">下载</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </template>
                        </div>
                    </template>
                </el-col>
            </el-row>
            <template #footer>
                <el-button @click="cancelUseClick">关 闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed, watch , watchEffect } from 'vue';
import { ElButton, ElDialog , ElLoading } from 'element-plus';
import { 
    SMSIPTaskOperationProcessesList,
    SMSIPTaskDetail,
    SMSIPTaskContentPage,
    SMSHDOperationProcessesList,
    SMSHDRectifyDetail,
} from '/@/api/centerControl/sms';
import { sysFileInfoPage } from '/@/api/centerControl/pubilc';
import axios from 'axios';

export default defineComponent( {
    name: 'dispose-course',
    components: {},
    props: {
        dispDialog:{
            type: Boolean,
            default: false,
        },
        dispInfo: {
            type: String,
            default: ''
        },
        statusVal: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const timeList = ref();
        const activityColor = ref();
        const isShowType = ref();
        const listData = ref([]);
        const paramVal = ref();
        const basicsInfo = ref();
        const isLoading = ref();

        const activePageNo = ref(1);
        const activePageSize = ref(10);
        const activeTotalRows = ref(0);
        const tableLoading = ref(false);

        const baseUrl = import.meta.env.VITE_API_URL as any;
        const ideView = import.meta.env.VITE_APP_API_VIEW_IDE;
        const base64Url = baseUrl + 'api/sysFileInfo/previewBase64'; // 设备类型接口

        /*** loading显示 */
        const showLoadingFun = () => {
            console.log('12')
            isLoading.value = ElLoading.service({
                target: '.mb20-load', // 设置loading的目标元素，可以是一个选择器字符串或一个DOM元素
                fullscreen: false, // 是否全屏显示
                text: '加载中...', // 显示的文本
            });
        }

        // 将Base64编码数据转换为Blob对象的辅助函数
        const base64ToBlob = (base64Data: any) => {
            var byteString = atob(base64Data.split(',')[1]); // 提取Base64编码的数据部分
            var mimeString = base64Data.split(':')[1].split(';')[0]; // 提取MIME类型
            var ab = new ArrayBuffer(byteString.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], {type: mimeString});
        }
        
        let isShowFile = false;
        let setInfo: any;
        /*** downClick 下载文件 */
        const download = async (val: any) => {
            console.log(val,'val')
            await getFileInfo(val.id);
            // 等待getFileInfo完成
            let setTimes = setInterval(() => {
                if(isShowFile){
                    let base64Data = setInfo;
                    let blob = base64ToBlob(base64Data);
                    
                    // 创建可下载的链接
                    let url = URL.createObjectURL(blob);
                    let link = document.createElement('a');
                    link.href = url;
                    link.download = val['附件名称']; // 指定下载的文件名
                    
                    // 将链接添加到DOM中
                    document.body.appendChild(link);
                    
                    // 触发点击事件开始下载
                    link.click();
                    
                    // 释放临时URL
                    URL.revokeObjectURL(url);
                    clearInterval(setTimes);
                }
            },20);
        };

        /*** 预览 */
        const viewClick = async (val: any) => {
            let viewUrl = baseUrl + 'api/Upload' + ideView + val.fileObjectName;
            window.open(viewUrl);
        }

        /*** getFileFun 获取文件数据 */
        const getFileInfo = async(val: Number) => {
            let param: any = {};
            param.id = val;
            axios.get(base64Url,{ params: param }).then((res: any) => {
                let item = res.data;
                if(item.success){
                    isShowFile = true;
                    setInfo = item.data;
                }
            }).catch((error: any) => {
                console.error('请求错误', error)
            });
        }

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('dispClick')
        }

        /*** 巡检任务处理过程列表 */
        const disposeFun = async (id: number) => {
            let param: any = {};
            param.l_IPTaskId = id;
            let res: any = await SMSIPTaskOperationProcessesList(param);
            if(res.success && res.data.length !== 0){
                showLoadingFun();
                let item: any = res.data;
                activityColor.value = item[0].id;
                if(item[0].n_TaskOperationClass === 5){
                    listData.value = [];
                    tableLoading.value = true;
                    isShowType.value = 'table';
                    paramVal.value = {
                        l_IPTaskId: item[0].l_IPTaskId,
                        l_AnalysisUnitId: item[0].l_AnalysisUnitId,
                    };
                    await getDataFun(paramVal.value);
                }else{
                    isShowType.value = 'form';
                    let param = {
                        id: item[0].l_IPTaskId,
                    };
                    await getDataFun(param);
                }
                item.map((i: any) => {
                    if(i.v_OperatorDescribe.includes('受控') || i.v_OperatorDescribe.includes('失控')){
                        if(i.v_OperatorDescribe.includes('受控')) i.type = 'success';
                        if(i.v_OperatorDescribe.includes('失控')) i.type = 'danger';
                        i.setShow = true;
                    }else{
                        i.setShow = false;
                    }
                });
                timeList.value = item;
            }
        }

        /*** 获取数据 */
        const getDataFun = async (val: any) => {
            let res: any;
            if(isShowType.value === 'form'){
                res = await SMSIPTaskDetail(val);
                if(res.success && Object.keys(res.data).length !== 0){
                    let setArr: any = [];
                    let detailObj: any = {};
                    let smsipTaskUsers = '-';
                    let smsipTaskTeamGroups = '-';
                    let smsipTaskPoss = '-';
                    if(res.data.smsipTaskUsers && res.data.smsipTaskUsers.length !== 0){
                        let setArr: any = [];
                        res.data.smsipTaskUsers.map((item: any) => {
                            setArr.push(item.v_UserName);
                        });
                        smsipTaskUsers = setArr.join(',');
                    }
                    if(res.data.smsipTaskTeamGroups && res.data.smsipTaskTeamGroups.length !== 0){
                        let setArr: any = [];
                        res.data.smsipTaskTeamGroups.map((item: any) => {
                            setArr.push(item.v_TeamGroupName);
                        });
                        smsipTaskTeamGroups = setArr.join(',');
                    }
                    if(res.data.smsipTaskPoss && res.data.smsipTaskPoss.length !== 0){
                        let setArr: any = [];
                        res.data.smsipTaskPoss.map((item: any) => {
                            setArr.push(item.v_PosName);
                        });
                        smsipTaskPoss = setArr.join(',');
                    }
                    if(res.data.ipPlan){
                        let ipPlan = res.data.ipPlan;
                        let detailObjPlan: any = {};
                        let smsipPlanUsers = '-';
                        let smsipPlanTeamGroups = '-';
                        let smsipPlanPoss = '-';
                        if(ipPlan.smsipPlanUsers && ipPlan.smsipPlanUsers.length !== 0){
                            let setArr: any = [];
                            ipPlan.smsipPlanUsers.map((item: any) => {
                                setArr.push(item.v_UserName);
                            });
                            smsipPlanUsers = setArr.join(',');
                        }
                        if(ipPlan.smsipPlanTeamGroups && ipPlan.smsipPlanTeamGroups.length !== 0){
                            let setArr: any = [];
                            ipPlan.smsipPlanTeamGroups.map((item: any) => {
                                setArr.push(item.v_TeamGroupName);
                            });
                            smsipPlanTeamGroups = setArr.join(',');
                        }
                        if(ipPlan.smsipPlanPoss && ipPlan.smsipPlanPoss.length !== 0){
                            let setArr: any = [];
                            ipPlan.smsipPlanPoss.map((item: any) => {
                                setArr.push(item.v_PosName);
                            });
                            smsipPlanPoss = setArr.join(',');
                        }
                        detailObjPlan['巡检路线'] = ipPlan.v_IPPathName;
                        detailObjPlan['风险分区'] = ipPlan.v_RiskPartitionName;
                        detailObjPlan['计划名称'] = ipPlan.v_Name;
                        detailObjPlan['巡检分类'] = ipPlan.v_IPClassName;
                        detailObjPlan['巡检类型'] = ipPlan.v_IPType;
                        detailObjPlan['巡检模式'] = ipPlan.v_IPModeName;
                        detailObjPlan['巡检周期值'] = ipPlan.n_IPCycleVaule;
                        detailObjPlan['巡检时间单位'] = ipPlan.v_IPCycleUintName;
                        detailObjPlan['开始日期'] = ipPlan.d_StartDate;
                        detailObjPlan['是否有结束日期'] = ipPlan.isAppointEndDate ? '是' : '否';
                        detailObjPlan['指定结束日期'] = ipPlan.d_EndDate;
                        detailObjPlan['重复几次结束'] = ipPlan.n_RepetitionTimesEnd;
                        detailObjPlan['开始时间'] = ipPlan.d_StartTime;
                        detailObjPlan['结束时间'] = ipPlan.d_EndTime;
                        detailObjPlan['工作日历'] = ipPlan.v_WorkingCalendarName;
                        detailObjPlan['是否启动巡检路线顺序'] = ipPlan.isUsedPathUnitOrder ? '是' : '否';
                        detailObjPlan['是否启动巡检定位'] = ipPlan.isUsedLocation ? '是' : '否';
                        detailObjPlan['巡检允许提前时间值'] = ipPlan.n_AllowEarlyValue;
                        detailObjPlan['巡检允许提前时间单位'] = ipPlan.v_AllowEarlyUnitName;
                        detailObjPlan['巡检允许延后时间值'] = ipPlan.n_AllowDelayedValue;
                        detailObjPlan['巡检允许延后时间单位'] = ipPlan.v_AllowDelayedUnitName;
                        detailObjPlan['任务生成模式'] = ipPlan.v_TaskGenerateModelName;
                        detailObjPlan['启动状态'] = ipPlan.v_StateName;
                        detailObjPlan['任务分配人员'] = smsipPlanUsers;
                        detailObjPlan['任务分配班组'] = smsipPlanTeamGroups;
                        detailObjPlan['任务分配岗位'] = smsipPlanPoss;
                        setArr.push({
                            formTitle: '巡检计划基础信息',
                            type: 'form',
                            info: detailObjPlan,
                        });
                    }
                    detailObj['巡检计划'] = res.data.v_IPPlanName;
                    detailObj['风险分区'] = res.data.v_RiskPartitionName;
                    detailObj['巡检分类'] = res.data.v_IPClassName;
                    detailObj['任务状态'] = res.data.v_StateName;
                    detailObj['巡检路线'] = res.data.v_IPPathName;
                    detailObj['巡检类型'] = res.data.v_IPType;
                    detailObj['计划开始时间'] = res.data.d_PlanStartTime;
                    detailObj['计划结束时间'] = res.data.d_PlanEndTime;
                    detailObj['实际开始时间'] = res.data.d_StartTime;
                    detailObj['实际结束时间'] = res.data.d_EndTime;
                    detailObj['实际执行人'] = res.data.v_ExecutorName;
                    detailObj['执行部门'] = res.data.v_ExecutorDeptName;
                    detailObj['任务分配人员'] = smsipTaskUsers;
                    detailObj['任务分配班组'] = smsipTaskTeamGroups;
                    detailObj['任务分配岗位'] = smsipTaskPoss;
                    detailObj['是否启动巡检路线顺序'] = res.data.isUsedPathUnitOrder ? '是' : '否';
                    detailObj['是否启动巡检定位'] = res.data.isUsedLocation ? '是' : '否';
                    detailObj['巡检允许提前时间值'] = res.data.n_AllowEarlyValue;
                    detailObj['巡检允许提前时间单位'] = res.data.v_AllowEarlyUnitName;
                    detailObj['巡检允许延后时间值'] = res.data.n_AllowDelayedValue;
                    detailObj['巡检允许延后时间单位'] = res.data.v_AllowDelayedUnitName;
                    detailObj['任务生成模式'] = res.data.v_TaskGenerateModelName;
                    detailObj['启动状态'] = res.data.v_StateName;
                    detailObj['任务分配人员'] = smsipTaskUsers;
                    detailObj['任务分配班组'] = smsipTaskTeamGroups;
                    detailObj['任务分配岗位'] = smsipTaskPoss;
                    detailObj['分配类型'] = res.data.v_AllocationType;
                    setArr.push({
                        formTitle: '巡检任务基础信息',
                        type: 'form',
                        info: detailObj,
                    });
                    basicsInfo.value = setArr;
                }
            }
            if(isShowType.value === 'table'){
                val.pageNo = activePageNo.value;
                val.pageSize = activePageSize.value;
                res = await SMSIPTaskContentPage(val);
                if(res.success && res.data.rows.length !== 0){
                    let item = res.data.rows;
                    activeTotalRows.value = res.data.totalRows;
                    let tableArr: any = [];
                    item.map((val: any) => {
                        let itemObj: any = {};
                        itemObj['巡检任务'] = val.v_IPTaskName ? val.v_IPTaskName : '-';
                        itemObj['风险管控分析单元'] = val.v_AnalysisUnitName ? val.v_AnalysisUnitName : '-';
                        itemObj['所属风险分区'] = val.v_RiskPartitionName ? val.v_RiskPartitionName : '-';
                        itemObj['是否受控'] = val.isControlled ? '是' : '否';
                        itemObj['隐患记录数'] = val.n_HiddenCount ? val.n_HiddenCount : '-';
                        tableArr.push(itemObj);
                    })
                    listData.value = tableArr;
                }
                tableLoading.value = false;
            }
            isLoading.value.close();
        }

        // 获取文件
        const getFileFun = async (sourceId: number) => {
            let param: any = {};
            param.PageNo = 1;
            param.PageSize = 99999;
            param.sourceId = sourceId;
            let res: any = await sysFileInfoPage(param);
            if(res.success) return res.data.rows;
        }

        /*** 获取隐患整改详情数据 */
        const getWaitFun = async (id: number) => {
            let param: any = {};
            param.id = id;
            let res: any = await SMSHDRectifyDetail(param);
            if(res.success && res.data && Object.keys(res.data).length !== 0){
                let setArr: any = [];
                let tableRectifyArr: any = [];
                let tableReviewArr: any = [];
                let tableAcceptanceArr: any = [];
                let detailObj: any = {};
                if(res.data.l_RectifyFileId){
                    await getFileFun(res.data.l_RectifyFileId).then((item: any) => {
                        if(item.length !== 0){
                            item.map((val: any) => {
                                let itemObj: any = {};
                                itemObj['id'] = val.id;
                                itemObj['fileObjectName'] = val.fileObjectName;
                                itemObj['附件名称'] = val.fileOriginName;
                                itemObj['文件格式'] = val.fileSuffix;
                                itemObj['文件大小'] = val.fileSizeKb;
                                itemObj['文件路径'] = val.filePath;
                                tableRectifyArr.push(itemObj);
                            });
                        }
                    });
                }
                if(res.data.l_ReviewFileId){
                    await getFileFun(res.data.l_ReviewFileId).then((item: any) => {
                        if(item.length !== 0){
                            item.map((val: any) => {
                                let itemObj: any = {};
                                itemObj['id'] = val.id;
                                itemObj['fileObjectName'] = val.fileObjectName;
                                itemObj['附件名称'] = val.fileOriginName;
                                itemObj['文件格式'] = val.fileSuffix;
                                itemObj['文件大小'] = val.fileSizeKb;
                                itemObj['文件路径'] = val.filePath;
                                tableReviewArr.push(itemObj);
                            });
                        }
                    });
                }
                if(res.data.l_AcceptanceSignatureId){
                    await getFileFun(res.data.l_AcceptanceSignatureId).then((item: any) => {
                        if(item.length !== 0){
                            item.map((val: any) => {
                                let itemObj: any = {};
                                itemObj['id'] = val.id;
                                itemObj['fileObjectName'] = val.fileObjectName;
                                itemObj['附件名称'] = val.fileOriginName;
                                itemObj['文件格式'] = val.fileSuffix;
                                itemObj['文件大小'] = val.fileSizeKb;
                                itemObj['文件路径'] = val.filePath;
                                tableAcceptanceArr.push(itemObj);
                            });
                        }
                    });
                }
                // detailObj['第几次整改'] = res.data.n_Times;
                detailObj['整改类型'] = res.data.v_TypeName;
                detailObj['整改期限'] = res.data.d_LimitTime ? res.data.d_LimitTime.split(' ')[0] : '-';
                detailObj['是否现场整改'] = res.data.isSceneRectify ? '是' : '否';
                detailObj['整改人员'] = res.data.v_RectifyUserName;
                detailObj['整改部门'] = res.data.v_RectifyDeptName;
                detailObj['整改措施'] = res.data.v_Measures;
                detailObj['整改状态'] = res.data.v_StateName;
                detailObj['是否整改转办'] = res.data.isRectificationShift ? '是' : '否';
                detailObj['整改结果状态'] = res.data.n_RectificationState === 0 ? '已消除' : '未消除';
                detailObj['整改日期'] = res.data.d_RectificationTime ? res.data.d_RectificationTime.split(' ')[0] : '-';
                detailObj['整改文字描述'] = res.data.v_RectificationDescribe;
                detailObj['原因分析'] = res.data.v_Reason;
                detailObj['复查部门'] = res.data.v_ReviewDeptName;
                detailObj['复查人员'] = res.data.v_ReviewUserName;
                detailObj['复查日期'] = res.data.d_ReviewTime ? res.data.d_ReviewTime.split(' ')[0] : '-';
                detailObj['复查结果'] = res.data.v_ReviewResultName;
                detailObj['复查意见'] = res.data.v_ReviewOpinion;
                detailObj['验收部门'] = res.data.v_AcceptanceDeptName;
                detailObj['验收人员'] = res.data.v_AcceptanceUserName;
                detailObj['是否验收转办'] = res.data.isAcceptanceShift ? '是' : '否';
                detailObj['验收日期'] = res.data.d_AcceptanceTime ? res.data.d_AcceptanceTime.split(' ')[0] : '-';
                detailObj['验收意见'] = res.data.v_AcceptanceOpinion;
                detailObj['验收结果'] = res.data.v_AcceptanceStateName;

                if(res.data.hidden && Object.keys(res.data.hidden).length !== 0){
                    let hiddenInfo = res.data.hidden;
                    let detailObjHidden: any = {};
                    detailObjHidden['任务名称'] = hiddenInfo.v_IPTaskName;
                    detailObjHidden['排查人员'] = hiddenInfo.v_CheckUserName;
                    detailObjHidden['排查部门'] = hiddenInfo.v_CheckDeptName;
                    detailObjHidden['隐患分类'] = hiddenInfo.v_TypeName;
                    detailObjHidden['分析单元'] = hiddenInfo.v_AnalysisUnitName;
                    detailObjHidden['巡检点'] = hiddenInfo.v_SMSDCListName;
                    detailObjHidden['是否自定义隐患'] = hiddenInfo.isCustom ? '是' : '否';
                    detailObjHidden['隐患排查日期'] = hiddenInfo.d_CheckDate;
                    detailObjHidden['隐患描述'] = hiddenInfo.v_Describe;
                    detailObjHidden['隐患级别'] = hiddenInfo.v_HiddenLevelName;
                    detailObjHidden['隐患地点'] = hiddenInfo.v_Place;
                    detailObjHidden['隐患部位'] = hiddenInfo.v_Part;
                    detailObjHidden['隐患状态'] = hiddenInfo.v_StateName;
                    detailObjHidden['隐患分类'] = hiddenInfo.v_HiddenDangerClass;
                    setArr.push({
                        formTitle: '巡检任务基础信息',
                        type: 'form',
                        info: detailObj,
                    });
                    if(hiddenInfo.l_FileId){
                        let hiddenArr: any = [];
                        await getFileFun(hiddenInfo.l_FileId).then((item: any) => {
                            if(item.length !== 0){
                                item.map((val: any) => {
                                    let itemObj: any = {};
                                    itemObj['id'] = val.id;
                                    itemObj['fileObjectName'] = val.fileObjectName;
                                    itemObj['附件名称'] = val.fileOriginName;
                                    itemObj['文件格式'] = val.fileSuffix;
                                    itemObj['文件大小'] = val.fileSizeKb;
                                    itemObj['文件路径'] = val.filePath;
                                    hiddenArr.push(itemObj);
                                });
                            }
                        });
                        setArr.push({
                            tableTitle: '隐患图片',
                            type: 'table',
                            listData: hiddenArr,
                            minWidth: 160,
                        });
                    }
                }
                setArr.push({
                    formTitle: '基础信息',
                    type: 'form',
                    info: detailObj,
                },{
                    tableTitle: '整改后照片',
                    type: 'table',
                    listData: tableRectifyArr,
                    minWidth: 160,
                },{
                    tableTitle: '复查照片',
                    type: 'table',
                    listData: tableReviewArr,
                    minWidth: 160,
                },{
                    tableTitle: '验收电子签名',
                    type: 'table',
                    listData: tableAcceptanceArr,
                    minWidth: 160,
                });
                basicsInfo.value = setArr;
            }
            isLoading.value.close();
        }

        /*** 隐患整改处理过程 */
        const waitFun = async (id: number) => {
            let param: any = {};
            param.l_HDHiddenId = id;
            let res: any = await SMSHDOperationProcessesList(param);
            if(res.success && res.data.length !== 0){
                showLoadingFun();
                activityColor.value = res.data[0].id;
                timeList.value = res.data;
                await getWaitFun(res.data[0].l_ForeignKeyId);
            }
        }
        
        watchEffect(() => {
            // if(timeList.value) showLoadingFun();
        });

        /*** 时间线点击事件 */
        const timelineHandle = async (val: any) => {
            activityColor.value = val.id;
            showLoadingFun();
            if(props.statusVal === 'dispose'){
                if(val.n_TaskOperationClass === 5){
                    listData.value = [];
                    tableLoading.value = true;
                    isShowType.value = 'table';
                    paramVal.value = {
                        l_IPTaskId: val.l_IPTaskId,
                        l_AnalysisUnitId: val.l_AnalysisUnitId,
                    };
                    getDataFun(paramVal.value);
                }else{
                    isShowType.value = 'form';
                    let param = {
                        id: val.l_IPTaskId,
                    };
                    getDataFun(param);
                }
            }else{
                await getWaitFun(val.l_ForeignKeyId);
            }
        }

        const activeHandleSizeChange = (val: any) => {
            // 每页的总数据
            activePageNo.value = 1;
            activePageSize.value = val;
            getDataFun(paramVal.value);
        }
        const activeHandleCurrentChange = (val: any) => {
            // 当前处于第几页
            activePageNo.value = val;
            getDataFun(paramVal.value);
        }

        /*** 监听dispDialog的变化 */
        watch(() => props.dispDialog,(newVal) => {
            if(newVal){
                titleCon.value = '处理过程';
                let getInfo = JSON.parse(props.dispInfo);
                if(props.statusVal === 'dispose'){
                    disposeFun(getInfo.id);
                }else{
                    isShowType.value = 'form';
                    if(props.statusVal === 'waitTwo') waitFun(getInfo.l_HDHiddenId);
                    if(props.statusVal === 'waitOne') waitFun(getInfo.id);
                }
            }
        })

        /*** dispDialog 响应弹窗的关闭  */
        const dispDialog = computed(() => {
            return props.dispDialog
        })

        return {
            handleClose,
            cancelUseClick,
            titleCon,
            dispDialog,
            timeList,
            activityColor,
            timelineHandle,
            isShowType,
            listData,
            activePageNo,
            activePageSize,
            activeTotalRows,
            activeHandleSizeChange,
            activeHandleCurrentChange,
            tableLoading,
            basicsInfo,
            download,
            viewClick,
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-dialog__body){
    height: calc(100vh - 110px);
    max-height: none!important;
    overflow-y: hidden;
}
:deep(.el-timeline-item__wrapper){
    padding-left: 20px;
}
:deep(.el-card__body){
    padding: 10px;
}
.mb20-load{
    height: calc(100vh - 110px);
}
.set-tab{
    :deep(.el-scrollbar__wrap){
        height: calc(100vh - 230px);
        overflow-y: auto;
    }
}
.activity-color{
    color: #409EFF !important;
}
.set-con{
    display: flex;
    flex-direction: column;
}
.mb20{
    padding-left: 0!important;
    margin-bottom: 0!important;
    height: 100%;
}
.time-s{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
}
.el-row-s{
    width: 100%;
    height: 100%;
    // border: 1px solid gold;
}
</style>